<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="get" id="f">
    <input type="text" placeholder="请输入文本" id="i1"/>
    <input type="checkbox" id="i2"/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>
<script>
    let int = document.querySelector("#i1")
    let i2 = document.querySelector("#i2")
    let f= document.querySelector("#f")



    int.onfocus = function () {
        console.log("获取焦点!!")
        console.log(int.value);
    }
    int.onblur = function () {
        console.log("失去焦点!!");
        console.log(int.value);
    }

    f.onsubmit = function(){
        alert(int.value);
    }

    int.onchange = function(){
        //输入框中的值 跟上次点击的不一样  就会执行此事件!!!
        console.log("值改变啦!!!");
    }
    f.onreset = function(){
        alert("重置按钮!!!");
    }
</script>
</body>
</html>